<template>
  <div class="box">
        <div class="header">
            <MyMtHeader titleText="我的购物车" />
            <div class="notice">
                <i class="van-icon van-icon-volume-o van-notice-bar__left-icon"></i>
                <span>当前电子钱包账户余额为:{{initPrice}}</span>
            </div>
        </div>
        <div class="middle">
            <mt-cell title="电子钱包充值"></mt-cell>
            <mt-field label="充值金额" placeholder="输入充值的金额" type="number" v-model="price"></mt-field>
        </div>
        <div class="footer">
            <button @click="addPrice">确认充值</button>
        </div>
  </div>
</template>

<script>
import MyMtHeader from '../MyMtHeader/MyMtHeader.vue'
import { Toast } from 'mint-ui'
export default {
    components: { MyMtHeader },
    data(){
        return {
            initPrice:888.88,
            price:0
        }
    },
    methods:{
        addPrice(){
            let { price} = this 
            if ( (price === 0 || price.length === 0 )){
                Toast({
                    message:'请输入大于 0 的数值',
                    duration: 1000
                })
                return
            }
            if (! /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)/.test(price)){
                Toast({
                    message:'请输入正确的金额格式,小数点后只保留两位',
                    duration: 2000
                })
                return
            }
            this.initPrice += price*1
        }
    },
}
</script>

<style scoped>
.box{
    background: #e7e8e861;
    min-height: 100%;
}

.notice{
  text-align: left;
  padding: 5px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fffbe8;
  color: #ed6a0c;
  font-size: 14px;
}
.middle >>> .mint-cell-title{
    text-align: left;
}
.footer button{
    width: 100%;
    margin: 20px 0px;
    height: 40px;
    background-color: white;
    border-radius: 5px;
    border: 1px solid #ed6a0c;
    color: #ed6a0c;
}
</style>